<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>局部注册组件</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
  <style>
  .component {
    text-align: center;
    color: #42b983;
    font-size: 28px;
    font-family: "微软雅黑";
  }
  </style>
</head>

<body>
  <div id="example">
    <!-- 使用注册的组件模板 -->
    <my-component></my-component>
    <test-btn></test-btn>
    <test-btn></test-btn>
    <test-btn></test-btn>
  </div>
  <script type="text/javascript">
  var data = {
    message: "data必须是函数。",
    counter: 0
  };
  // 局部注册
  var child = {
    template: "<div class='component'><h1>局部注册组件， {{message}} </h1></div>",
    data: function() {
      // data必须是函数
      return data;
    }
  };


  var btn = {
    template: "<button type='button' v-on:click='counter += 1'>{{counter}}</button>",
    data: function() {
      // data 是一个函数，因此 Vue 不会警告，
      // 但是我们为每一个组件返回了同一个对象引用
      // return data;
      

      
      //由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题：
      return {
        counter: 0
      }
    }
  }


  // new一个vue对象
  var example = new Vue({
    el: "#example",
    components: {
      'my-component': child,
      'test-btn': btn
    }

  });
  </script>
</body>

</html>
